<template>
  <div>
    <SonCom ref="son"/>
<!-- 1、给要获取的元素或者子组件标签上设置ref属性 -->
<!-- 2。通$refs，xxx获取- -->
<input ref="xxx" class="ipt" type="text">
<input ref="yyy" class="ipt" type="text">

  </div>
</template>

<script>
import SonCom from './components/SonCom.vue';

//掌握ref的使用
//作用：1、获取dom元素，2、获取组件实例对象
//ref的绑定只能写在template中，不能写在script中

export default {
    mounted() {
    console.log(this.$refs.xxx);
    console.log(this.$refs.yyy);
    //同一时间只能激活一个
    this.$refs.xxx.focus()
    this.$refs.yyy.focus() 
    //this是组件的实例对象，通过this.$refs可以直接拿到组件的元素
    console.log(this.$refs.son.message);//hello son
    },
    data() {
      return {
        
      }
  },
  components: {
    SonCom
  },
  }
</script>

<style lang="scss" scoped>

</style>